<template>

  <div>
    <template v-if="isEditFlag">
      <div style="display: flex;justify-content: space-evenly">
        <div @click="submitEdit" style="padding-right: 15px">
          <slot name="submitButton">
            <a-button
              :loading="submitLoading"
              :size="btnSize"
              :type="btnType || 'success'" icon="el-icon-success">提交
            </a-button>
          </slot>
        </div>

        <div @click="cancelEdit">
          <slot name="cancelButton">
            <a-button :size="btnSize"
                      :type="btnType || 'warning'"
                      icon="el-icon-error">取消
            </a-button>
          </slot>
        </div>
      </div>
    </template>

    <div @click="editHandle" v-else>
      <slot name="editButton">
        <a-button
          :size="btnSize"
          :type="btnType || 'primary'" icon="el-icon-edit">编辑
        </a-button>
      </slot>
    </div>
  </div>

</template>

<script>

  import _ from 'lodash'
  import AButton from '@/components/ATheFridayClub/AButton'

  export default {
    name: 'AInlineEdit',
    components: { AButton },
    props: {
      btnSize: {
        type: String,
        default: 'small'
      },
      btnType: {
        type: String,
        default: null
      },
      isEditFlag: { //  是否正在编辑
        type: Boolean,
        default: false,
        require: true
      },
      editFormData: {  //  需要编辑的原数据 (每一行的数据)
        type: Object,
        require: true
      },
      editKeys: {  //  在这个数组中的才需要启用编辑
        type: Array,
        default: () => ([])
        // require: true
      },

      /**
       * 必须返回一个promise对象
       * @deprecated
       * @link submitNext
       * @return Promise
       */
      submitFunc: {
        type: Function
        // require: true

      },
      //  新版本用这个
      submitNext: {
        type: Function
      }
    },
    data() {
      return {
        originFormData: {},
        submitLoading:false
      }
    },
    watch: {
      editFormData: {
        handler(newRow) {
          if (!Reflect.has(newRow, 'isEdit')) {
            this.$set(newRow, 'isEdit', false)
          }
        },
        immediate: true
      }
    },
    methods: {

      //  开始编辑
      editHandle() {
        console.log('editHandle')
        console.log(this.editKeys)
        console.log(this.editKeys.length)
        console.log(_.cloneDeep(this.editFormData))

        this.updateEdit(true)
        //  save origin data (copy 一份当前的副本在组件内部)
        // console.log(this.editKeys);
        if (this.editKeys.length) {
          this.editKeys.map((key) => {
            this.$set(this.originFormData, key, _.cloneDeep(this.editFormData[key]))
          })
        } else {
          this.$set(this, 'originFormData', _.cloneDeep(this.editFormData))
        }

      },

      //  把原始的数据改变,恢复为备份的数据
      cancelEdit() {
        this.updateEdit(false)
        //  reset data 2 origin data
        if (this.editKeys.length) {
          this.editKeys.map((key) => {
            this.$set(this.editFormData, key, this.originFormData[key])
          })
        } else {
          // this.$set(this, 'editFormData', this.originFormData)
          Object.keys(this['originFormData']).filter(k => k !== 'isEdit').map(k => {
            this.$set(this.editFormData, k, this.originFormData[k])

          })
        }

        // this.$emit('')
      },

      submitEdit() {
        //  {row,resolve,reject}
        if (this.submitNext) {
          this.submitLoading = true
          this.submitNext({
            row: this.editFormData, resolve: () => {
              console.log('!~~~~~~~ editFormData resolve')
              this.updateEdit(false)
              this.submitLoading = false
            }, reject: (err) => {
              this.submitLoading = false
              console.error('~~~error')
              // this.cancelEdit()
              this.$message.error(err)
            }
          })
        } else if (this.submitFunc) {

          // this.editKeys.find((key) => {
          //   this.editFormData[key]
          // })

          //  执行父组件传递过来的提交
          this.submitFunc({ row: this.editFormData }).then(() => {
            console.log('!~~~~~~~~~~~~~~~~~~~editFormData resolve')
          }, (err) => {
            console.error(err)
          })

          this.updateEdit(false)

        } else {
          this.updateEdit(false)
        }

      },
      updateEdit(isEdit) {
        this.$emit('update:isEditFlag', isEdit)
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
